<%--
  Created by IntelliJ IDEA.
  User: Oracle
  Date: 2022/4/23
  Time: 19:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的库存</title>
</head>

<link rel="stylesheet" href="/static/css/font/iconfont.css"/>
<link rel="stylesheet" href="/static/css/userpage.css">
<link rel="stylesheet" href="/static/css/floatbar.css">
<link rel="stylesheet" href="/static/css/font.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css"/>
<script src="/static/js/store.js"></script>

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-image: url(/static/image/header-bg_csgo.jpg);
        background-repeat: no-repeat;
    }

    a {
        text-decoration: none;
    }

    .quanBu {
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
    }

    .pageTop{
        height: 130px;
        width: 80vw;
        margin: 0 auto;
        background-image: url(/static/image/marcket-header-bg.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .topKuang {
        width: 80vw;
        height: 61px;
        margin: 25px auto 0;
        border-top-left-radius: 10px;
    }

    .zhuTiaoZhuan {
        width: 80vw;
        height: 60px;
        border: 1px solid #00000000;
    }

    .zhuTiaoZhuan a {
        color: white;
        font-size: 15px;
        color: #7d7f81;
        font-weight: bold;
    }

    .zhuTiaoZhuan a:hover {
        color: white;
    }

    .zhuTiaoZhuan > ul > li {
        float: left;
        list-style: none;
        margin: 20px;
        color: #888783;
    }
    .zhuTiaoZhuan ul{
        margin-top: 7px;
    }

    .zhuTiaoZhuan > ul > li:hover {
        color: #FFFFFF;
    }

    .jingQian {
        width: 200px;
        height: 50px;
        float: right;
        text-align: center;
        line-height: 55px;
        color: #888783;
    }

    .saiXuan {
        width: 80vw;
        height: 61px;
        border-top: 1px solid #4873c8;
        display: flex;
        margin: auto;
        font-size: 13px;
    }

    .saiXuan a {
        color: white;
    }

    .test1 {
        width: 90px;
        height: 30px;
        display: inline-block;
        margin: 15px 0 0 12px;
        color: #888783;
        line-height: 30px;
        padding-left: 5px;
        border-radius: 3px;
        background: #2d2f3e;
    }
    .test1:hover{
        background: #3a3e52;
        color: white;
        cursor: pointer;
    }

    .test2 {
        height: 30px;
        margin-left: 320px;
        line-height: 55px;
    }

    .searchContent {
        padding: 7px;
        outline: none;
        float: left;
        margin-top: 15px;
        border: 1px solid #55aaff;
        background-color: #2470f320;
    }

    .searchBtn {
        padding: 7px;
        float: left;
        border: none;
        margin-top: 15px;
        width: 70px;
        background-color: #55aaff;
        color: white;
    }

    .gongNengKuang {
        width: 80vw;
        height: 53px;
        margin: 20px auto 0;
        background-color: #1c202b;
    }

    .gnk_Zuo {
        width: 400px;
        height: 50px;
        float: left;
        margin-left: 20px;
    }

    .gnk_Yuo {
        width: 450px;
        height: 50px;
        float: right;
    }

    .gnk_Yuo a {
        color: white;
    }

    .xuanXiang {
        width: 90px;
        height: 30px;
        border: 1px solid #45536C;
        text-align: center;
        margin-top: 12px;
        line-height: 30px;
        float: left;
    }

    .xuanXiang > a {
        color: #63779B;
        font-size: 14px;
    }

    .duoXuan{
        width: auto;
        height: 50px;
        color: #888783;
        line-height: 50px;
        float: left;
        margin-left: 10px;
        font-size: 15px;
    }
    .duoXuan span{
        margin-left: 5px;
        color: orange;
        font-size: 17px;
    }

    .shuaXing {
        float: left;
        width: 120px;
        height: 38px;
        margin:9px 0 0 140px;
        text-align: center;
        line-height: 38px;
        background-color: #45536c;
        color: #ffffff;
    }

    .Shangjia {
        float: left;
        width: 120px;
        height: 38px;
        margin-top: 9px;
        text-align: center;
        line-height: 38px;
        background-color: #3f5d97;
        margin-left: 10px;
        color: #ffffff;
    }
    .Shangjia:hover{
        cursor: pointer;
        background-color: #496db4;
    }

    .wuPing {
        width: 80vw;
        height: 100vh;
        margin: 0 auto;
        background-color: white;
    }

    .wuPing a {
        text-decoration: none;
        color: black;
    }


    .goods {
        width: 210px;
        height: 220px;
        border: 1px solid #d6d6d6;
        float: left;
        margin: 25px 0 0 28px;
    }

    .goods i{
        float: right;
        position: relative;
        opacity: 0;
        color: #d6d6d6;
        bottom: 20px; right: 5px;
    }

    .goods > .goods-img {
        text-align: center;
        width: 210px;
        height: 170px;
        background-image: url(/static/image/item_bg.png);
        position: relative;
        left: 0;
        top: 0;
    }

    .goods > .goods-img img {
        margin-top: 10px;
    }

    .goods > .goods-info {
        width: 210px;
        height: 50px;
        background-color: #F9F9F9;
    }

    .goods-info h3 {
        width: 210px;
        font-weight: normal;
        font-size: 14px;
        padding: 3px 0;
        overflow: hidden;
    }

    .goods-info span {
        font-weight: bold;
        color: orange;
        font-size: 14px;
        padding-left: 5px;
    }

    .goodsTitle {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .goodsTitle:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    .goods-info a:hover {
        color: orange;
    }
    .salable .goods:hover{
        cursor: pointer;
        border: 1px solid orange;
    }
    /*--*/
    .box ul li{
        list-style: none;
        float: left;
    }
    .boxTop i:hover{
        cursor: pointer;
        color: #848484;
    }
    .box{
        background-color: white;
        z-index: 11;
        width: 60vw;
        height: 59vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin:auto;
        display: none;
    }
    .boxTop{
        height: 7vh;
        background-color: white;
        text-align: center;
        line-height: 7vh;
    }
    .boxTop i{
        float: right;
        font-size: 14px;
        margin: 10px 20px 0 0;
    }
    .boxTop h3 span{
        font-size: 14px;
        font-weight: normal;
        color: gray;
    }
    .commoditys{
        height: 40vh;
        text-align: center;
        font-size: 10px;
        margin-top: 4px;
        overflow: hidden;
        overflow-y: scroll;
        background-color: white;
    }


    /*显示已上架但未出售的物品样式*/
    .commodity{
        width: 100%;
        height: auto;
    }
    .commodity table{
        width:100%;
        text-align: center;
        margin: 0 auto;
    }
    /*第一行表格标题样式*/
    .commodity table tr:first-child{
        height: 30px;
        background-color: #F5F5F5;
        color: #959595;
        font-weight: normal;
    }
    .commodity table tr:first-child th{
        border: none;
    }
    .commodity table {
        border: none;
        border-collapse: collapse;
    }
    .commodity table span{
        font-size: 18px;
        color: orange;
        font-weight: bold;
    }
    /*所有表格 行的样式*/
    .commodity table tr{
        border-bottom: 1px solid #ded7d7;
    }

    /*所有的第一行第一列样式*/
    .commodity table tr td:first-child{
        background: url("/static/image/item_bg.png");
        width: 80px;
        height: 80px;
        margin: 5px;
    }
    .commodity table tr:hover{
        background-color: #F5F5F5;
    }

    .commodity input{
        outline: none;
        width: 200px;
        padding: 10px;
        border-radius: 2px;
        border: 1px solid #e2e2e2;
    }

    .bottom{
        padding: 1vw 2vh;
        font-size: 10px;
        color: #b2b2b2;
        background-color: #33363a;
    }
    .bottom button{
        float: right;
        width: 80px;
        height: 30px;
        background-color: #098aea;
        color: white;
        border: none;
        border-radius: 4px;
        margin-top: 3vh;
    }
    .bottom button:hover{
        cursor: pointer;
        background-color: #2396ec;
    }
    .bottom span{
        font-size: 20px;
        color: #dd8940;
    }
    .bottom h6{
        color: #dd8940;
    }
    .abrasionTag{
        width: 60px;
        height: auto;
        background-color: green;
        font-size: 13px;
        color: white;
        position: absolute;
        left: 0;
        top: 0;
    }
    .dealState{
        width: 60px;
        height: auto;
        font-size: 14px;
        color: #deb260;
        position: absolute;
        left: 3px;
        top: 150px;
    }
    .Shangjia button{
        background-color: #3f5d97;
        padding-top: 10px;
        border: none;
        outline: none;
        color: white;
        font-size: 15px;
    }
    .pagingDiv{
        width: 100%;
        height: 30px;
        float: left;
        text-align: center;
        margin: 50px auto;
        font-size: 18px;
    }
    .pagingDiv a{
        margin: 5px;
    }
</style>
<body>

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function (){

        //等待上架的物品id数组
        var waitPutawayIds = new Array();

        //定时每秒检测用户选中库存
        setInterval(function getsize(){
            var size = $("[name=goodsIds]").length;
            $(".duoXuan span").html(size);
        },100);
        $(".goods").click(function(){
            var val = $(this).children("input").attr("name");
            var id = $(this).children("input").val();

            if(val == "goodsIds"){
                $(this).find("i").css({"opacity":"0","color":"#d6d6d6"});
                $(this).children("input").attr("name","ids");
                $(this).css({"border":"1px solid #d6d6d6"});
                for(var i = 0;i<waitPutawayIds.length;i++){
                    if(id == waitPutawayIds[i]){
                        // waitPutawayIds.alert();
                        waitPutawayIds.splice(i,1);
                    }
                }
                console.log(waitPutawayIds);
            }else{
                $(this).find("i").css({"opacity":"1","color":"orange"});
                $(this).children("input").attr("name","goodsIds");
                $(this).css({"border":"1px solid orange"});
                waitPutawayIds.push(id);
            }
        });


        $("i").click(function(){
            $(".box").css("display","none");
            $("#cover").css("display","none");
            $("#goodsShowTable  tr:not(:first)").html("");
        });
        $("#putaway").click(function(){
            if(waitPutawayIds.length != 0){
                $(".box").css("display","block");
                $("#cover").css("display","block");
                $("#cover").css("height",$(document).height());
                $.ajax({
                    url:" ${pageContext.request.contextPath}/user/showPutawayGoods",
                    data:{'goodsIds':waitPutawayIds},
                    type:"post",
                    traditional:true,
                    dataType:"json",
                    success:function (data){
                        console.log(data);
                        var table = $("#goodsShowTable");

                        $("#goodsNum").html("("+data.length+"件)")

                        for(var i = 0; i< data.length; i++){
                            // alert(data[i].goods.converPath);
                            var t1 = "<td><img src=' "+data[i].goods.converPath+" ' width='50px' height='50px'></td>";
                            var t2 = "<td>  "+data[i].goods.goodsType.name+" | "+data[i].goods.coating+"("+data[i].appearance+")  </td>";
                            var price = data[i].priceCh;
                            var t3 = null;
                            if(price == 0 || price == null){
                                t3 = "<td><span>暂无</span></td>";
                            } else{
                                t3 = t3 = "<td><span>￥" + price + "</span></td>";
                            }
                            var t4 = "<td>￥<input type='text' placeholder='出售金额'  runat='server' class='easyui-numberbox' precision='2' ></td>";
                            var id = data[i].id;
                            var td = "<tr value='" + id + "'>" + t1+t2+t3+t4 + "</tr>";
                            console.log(td);
                            table.append(td);
                        }
                    },
                    error:function (){
                        alert("请求失败");
                    }
                })

            } else {
                alert("请选择物品");
            }
        });

        var priceList = new Array();

        $("#putawayBtn").click(function (){

            var row = $("#goodsShowTable tr:visible").length;   //tr长度
            var tr = $("#goodsShowTable tr");                   //table下所有的tr
            var totalPrice = 0.0;
            for (i = 1; i < row; i++) {
                var td = tr.eq(i).children('td'); //tr下所有的td

                //用户输入价格
                var inputPrice = td.eq(3).find("input").val();

                if(inputPrice != null && inputPrice != ""){
                    priceList.push(inputPrice);
                }else{
                    alert("please input price");
                    break;
                }
            }
            if(priceList.length == waitPutawayIds.length){
                $.ajax({
                    url: "${pageContext.request.contextPath}/deal/batchPutaway",
                    data: {"epIds": waitPutawayIds,"priceList":priceList},
                    type: "post",
                    traditional:true,
                    success:function (res){
                        alert("上架成功");
                        window.location.href = "${pageContext.request.contextPath}/user/mysell";
                    },
                    error:function (){
                        alert("请求失败");
                    }
                })
            }

        })

        $("#goodsShowTable tr").children("td input").blur(function (){
            alert(this.val());
            alert(1);
        })


    });
</script>

<div class="quanBu">
    <div class="top">
        <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%"
                height="71px" frameborder="0" name="inventory" id="userTop"></iframe>
    </div>
    <div class="pageTop">
        <div class="topKuang">
            <div class="zhuTiaoZhuan">
                <ul>
                    <li><a href="">Stem库存</a></li>
                    </a>
                    <li><a href="">购买记录</a></li>
                    </a>
                    <li><a href="">我的还价</a></li>
                    </a>
                    <li><a href="">等待收货</a></li>
                    </a>
                </ul>
                <div class="jingQian">
                    <span>件数:${requestScope.userGoodsList.size()}</span>&nbsp;
                    <span>估值:￥0</span>
                </div>
            </div>
        </div>
        <div class="saiXuan">
            <div class="test1">筛选</div>
            <div class="test1">品质</div>
            <div class="test1">类别</div>
            <div class="test1">外观</div>
            <div class="test1">显示全部</div>
            <div class="test2">
                <form>
                    <input class="searchContent" name="" placeholder="输入物品名称" size="30" type="text"/>
                    <input type="submit" id="searchBtn" class="searchBtn" value="搜索"/>
                </form>
            </div>
        </div>
    </div>


    <div class="gongNengKuang">
        <div class="gnk_Zuo">
            <div class="xuanXiang"><a href="">时间</a></div>
            <div class="xuanXiang"><a href="">价格</a></div>
            <div class="xuanXiang"><a href="">磨损</a></div>
            <div class="duoXuan">
                已选<span>&nbsp;0</span>/${requestScope.userGoodsList.size()}
            </div>
        </div>
        <div class="gnk_Yuo">
            <a href="">
                <div class="shuaXing">刷新</div>
            </a>
            <div class="Shangjia" id="putaway">
                上架
            </div>
        </div>
    </div>

    <div class="wuPing">
        <c:if test="${empty requestScope.userGoodsList}">
            <center>
                <img src="/static/image/data-nodata.png" width="313px" height="107px" style="margin-top: 100px;">
                <br><br/>
                <font color="gray">暂时什么都还没有呢</font>
            </center>
        </c:if>

        <c:if test="${not empty requestScope.userGoodsList}">
            <%--用户库存物品迭代--%>
            <ul class="salable">
                <c:forEach items="${requestScope.userGoodsList}" var="exter">
                    <li>
                        <div class="goods">
                            <input type="hidden" name="ids" value="${exter.id}"/>
                            <div class="goods-img">
                                <c:if test="${exter.appearance eq '崭新出厂'}">
                                    <div class="abrasionTag" style="background-color: green">崭新出厂</div>
                                </c:if>
                                <c:if test="${exter.appearance eq '略有磨损'}">
                                    <div class="abrasionTag" style="background-color: #488B48">略有磨损</div>
                                </c:if>
                                <c:if test="${exter.appearance eq '久经沙场'}">
                                    <div class="abrasionTag" style="background-color: #F1AD4D">久经沙场</div>
                                </c:if>
                                <c:if test="${exter.appearance eq '战痕累累'}">
                                    <div class="abrasionTag" style="background-color: #993A38">战痕累累</div>
                                </c:if>
                                <c:if test="${exter.appearance eq '破损不堪'}">
                                    <div class="abrasionTag" style="background-color: #B7625F">破损不堪</div>
                                </c:if>
                                <c:if test="${exter.dealState == 1}">
                                    <div class="dealState" value="1">出售中...
                                        <input type="hidden" class="dealSs" value="1" >
                                    </div>
                                </c:if>
                                <c:if test="${exter.dealState != 1}">
                                    <div class="dealState" value="1">
                                        <input type="hidden" class="dealSs" value="0" />
                                    </div>
                                </c:if>
                                <img src="${exter.goods.converPath}" width="147px" height="147px"/>
                            </div>
                            <div class="goods-info">
                                <a href="/goods/goodsInfo/${exter.id}">
                                    <h3 class="goodsTitle">&nbsp;
                                            ${exter.goods.goodsType.name} | ${exter.goods.coating} (${exter.appearance})
                                    </h3>
                                </a>
                                <span>￥${exter.priceCh}</span>
                            </div>
                            <i class="fa fa-check"></i>
                        </div>
                    </li>
                </c:forEach>
            </ul>
            <div class="pagingDiv">
                <a href="/user/inventory?pageNum=1">首页</a>
                <a href="/user/inventory?pageNum=${requestScope.pageInfo.pageNum - 1}">上一页</a>
                <a href="javascirpt:;">${requestScope.pageInfo.pageNum}/${requestScope.pageInfo.pages}</a>
                <a href="/user/inventory?pageNum=${requestScope.pageInfo.pageNum + 1}">下一页</a>
                <a href="/user/inventory?pageNum=${requestScope.pageInfo.pages}">尾页</a>
            </div>
        </c:if>
    </div>


    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px"
                frameborder="0"></iframe>
    </div>
</div>


<%--右侧悬浮框--%>
<div class="floatbar">
    <a href="">
        <div class="Icontext"><span class="iconfont icon-shouji"></span><br/>
            <font size="1">App</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-xingxing"></span><br/>
            <font size="1" color="#95959">收藏</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weixin"></span><br/>
            <font size="1" color="#95959">公众号</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weibo"></span><br/>
            <font size="1" color="#95959">微博</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-wenhao"></span><br/>
            <font size="1" color="#95959">帮助</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-duanxin"></span><br/>
            <font size="1" color="#95959">客服</font>
        </div>
    </a>
    <a href="javascript:scroll(0,0);">
        <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br/>
            <font size="2" color="#95959">TOP</font>
        </div>
    </a>
</div>

<%-- 用户信息悬浮框 --%>
<div class="store" id="store">
    <div class="store-info">
        <div class="store-user">
            <div class="store-user-img">
                <c:if test="${empty sessionScope.userNow.headPath}">
                    <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                </c:if>
                <c:if test="${not empty sessionScope.userNow.headPath}">
                    <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                </c:if>
            </div>
            <div class="store-user-name">
                <c:if test="${not empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.username}</h4>
                </c:if>
                <c:if test="${empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.tellphone}</h4>
                </c:if>
                <p><a href="/user/logout">注销</a></p>
            </div>
        </div>
        <div class="store-account">
            <div class="balance">余额
                <span>${sessionScope.userNow.balance}</span>
            </div>
            <div class="topUp">
                <a href="${pageContext.request.contextPath }/user/center">充值</a>
            </div>
        </div>
    </div>
</div>

<%--上架信息物品框--%>
<div class="box">
    <div class="boxTop">
        <i class="fa fa-remove"></i>
        <h3>上架饰品<span id="goodsNum"></span></h3>
    </div>
    <!-- 商品上架展示 -->
    <div class="commoditys">
        <div class="commodity">
            <table border="1" id="goodsShowTable">
                <tr>
                    <th>饰品</th>
                    <th width="200px">饰品名称</th>
                    <th width="100px">参考价格</th>
                    <th width="200px">出售金额</th>
                </tr>
            </table>
        </div>
    </div>
    <div class="bottom">
        <button id="putawayBtn">上架</button>
         预计收入 | <span>￥0</span>
        <br><br>
        <h6>请在买家付款后12小时内发货，否则将下架该类饰品并取消自售权限.</h6>
    </div>
</div>
<%--页面遮罩层--%>
<div id="cover" class="cover" style="background: #000000; position: absolute;
    left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.5; display:
    none; z-index: 2;"></div>
</body>
</html>
